﻿@import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@1.42.4/dist/style.css';
@import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@1.42.4/dist/theme-default.css';
@import 'https://cdn.jsdelivr.net/npm/@vue-flow/controls@latest/dist/style.css';
@import 'https://cdn.jsdelivr.net/npm/@vue-flow/minimap@latest/dist/style.css';
@import 'https://cdn.jsdelivr.net/npm/@vue-flow/node-resizer@latest/dist/style.css';

html,
body,
#app {
    margin: 0;
    height: 100%;
}

#app {
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}

.vue-flow__minimap {
    transform: scale(75%);
    transform-origin: bottom right;
}

.dnd-flow {
    flex-direction:column;
    display:flex;
    height:80vh;
}

.dnd-flow aside {
    color:#fff;
    font-weight:700;
    border-right:1px solid #eee;
    padding:15px 10px;
    font-size:12px;
    background:#10b981bf;
    -webkit-box-shadow:0px 5px 10px 0px rgba(0,0,0,.3);
    box-shadow:0 5px 10px #0000004d
}

.dnd-flow aside .nodes>* {
    margin-bottom:10px;
    cursor:grab;
    font-weight:500;
    -webkit-box-shadow:5px 5px 10px 2px rgba(0,0,0,.25);
    box-shadow:5px 5px 10px 2px #00000040
}

.dnd-flow aside .description {
    margin-bottom:10px
}

.dnd-flow .vue-flow-wrapper {
    flex-grow:1;
    height:100%
}

@media screen and (min-width: 640px) {
    .dnd-flow {
        flex-direction:row
    }

    .dnd-flow aside {
        min-width:25%
    }


}

@media screen and (max-width: 639px) {
    .dnd-flow aside .nodes {
        display:flex;
        flex-direction:row;
        gap:5px
    }


}

.dropzone-background {
    position:relative;
    height:100%;
    width:100%
}

.dropzone-background .overlay {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:1;
    pointer-events:none
}